<template>
    <el-dialog class="dialogMini dialogEdit" :closeOnClickModal="false" :visible.sync="showAvatarEdit">
        <div class="editBox">
            <vue-cropper ref="cropper" 
                :img="image" 
                :output-size="option.size" 
                :output-type="option.outputType"
                :can-move="option.canMove" 
                :can-move-box="option.canMoveBox"
                :fixed="option.fixed" 
                :fixed-number="option.fixedNumber"
                :fixed-box="option.fixedBox" 
                :original="option.original"
                :auto-crop="option.autoCrop" 
                :auto-crop-width="option.autoCropWidth" 
                :auto-crop-height="option.autoCropHeight" 
                :center-box="option.centerBox"
                :high="option.high"
                :max-img-size="option.max"
                mode="cover"
            >
            </vue-cropper>
            <div class="tips" v-if="!image">
                <input type="file" title="" class="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="changeImage($event)">
                <el-button class="btnAdd" icon="el-icon-plus" circle></el-button>  
                <p>프로필 사진을 첨부해 주세요(.jpg, jpeg, png)</p>
            </div>                      
            <el-button v-else class="btnDel" type="danger" icon="el-icon-delete" circle @click="reset"></el-button>
        </div>
        <div slot="footer" class="miniFooter">
            <el-button type="primary" :disabled="isDisabled" :loading="uploading" @click="uploadImg">확인</el-button>
            <el-button class="esc" @click="hideBox">취소</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Local } from '@/utils'
import { uploadImg,updatePhoto } from '@/api'
import { VueCropper } from 'vue-cropper'

export default {
  name:'',
  components:{VueCropper},
  props:[],
  data(){
    return {
        isDisabled:true,
        uploading:false,
        fileName:'',
        image:null,
        option: {
          size: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          fixed: true,
          fixedNumber: [1, 1],
          fixedBox: false,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          autoCropWidth: 200,
          autoCropHeight: 200,
          centerBox: true,
          high: true,
          max: 99999
        },
    }
  },
  computed:{
      ...mapState(['userInfo','showAvatarEdit']),
  },
  created(){
    //   this.image=this.userInfo.uthumb
  },
  mounted(){},
  methods:{
    ...mapActions(['setUserInfo','setShowAvatarEdit']),
    reset() {
        this.image = null;
        this.isDisabled=true;
    },
    changeImage(e) {
        let _this = this;
        let file = e.target.files[0] 
        _this.fileName = file.name;
        if(file) {
            let size = Math.floor(file.size / 1024);
            if (size > 5*1024) {
                this.$alert('5MB이하의 이미지를 첨부해주세요.', '', {
                    confirmButtonText: '확인'
                });
                return false
            }
        }
        let reader = new FileReader(); 
            reader.onload =(e) => { 
            let data; 
            if (typeof e.target.result === 'object') { 
                data = window.URL.createObjectURL(new Blob([e.target.result])) 
            } else { 
                data = e.target.result 
            }
                _this.image = data
            }
            reader.readAsArrayBuffer(file);
            this.isDisabled=false    
    },
    uploadImg(){
        let _this = this;    
        this.$refs.cropper.getCropBlob(async (data) => { 
            let img = window.URL.createObjectURL(data) 
                try {
                    _this.uploading=true;
                    let res = await uploadImg({image:data});
                    if (res.code == 200) {
                        _this.updatePhoto(res.data)                        
                    }else{
                        _this.uploading=false;
                    }
                } catch (error) {
                    _this.uploading=false;
                } 
            })   
    },
    async updatePhoto(data){
        let _this = this,timer=null;
        let res = await updatePhoto({image_id:data.id});
        if (res.code == 200) {
            let _userInfo = this.userInfo;
            _userInfo.uthumb=data.url;
            this.setUserInfo(_userInfo)
            Local.set('userInfo',_userInfo)
            this.$alert('프로필 사진이 수정되었습니다.', '', {
              confirmButtonText: '확인'
            });
            timer&&clearTimeout(timer);
            timer=setTimeout(()=>{
                _this.uploading=false;
                _this.setShowAvatarEdit(false)
            },300)
        }else{
            this.uploading=false;
        }
    },
    hideBox(){
        this.setShowAvatarEdit(false)
    }
  },
  watch:{
  }
}
</script>
<style>
.cropper {
  height: 400px;
  background: #fdfdfd;
}
</style>
<style lang="scss" scoped>
</style>